<!--vue模板-->
<template>
  <el-tree class="tre" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</template>

<!--vue 组件选项定义-->
<script setup>
import { inject, onBeforeMount, ref } from "vue";
import { queryCategoryAll,  queryById,getLevel1 } from "@/api/basic/Category.js";



// 再次查询数据
const showData = () => {
  init();
}

defineExpose({
  showData,
  changeData
})

const showCurData = inject('showCurData')

const handleNodeClick = (data) => {
  console.log(data,"dasta");
  showCurData(data.id,data)
};

const data = ref([]);

const defaultProps = {
  children: "children",
  label: "name",
  id: "id",
};
/**
 * 更改数据源 只显示父类id
 */
async function changeData (){
  let res = await getLevel1();
  data.value = res.data
}

async function init() {
  const res = await queryCategoryAll();
  data.value = res.data;

  console.log(res, "res");
}

// 生命周期
onBeforeMount(() => {
  changeData();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>

.tre {
  border: 1px solid #eee;
  height: calc(99% - 1px);
}

</style>
